<template>
	<div class="pay-container">
		<!-- 生成微信支付二维码 -->
		<div class="erwei">
			<img :src="payUrl" alt="" />
		</div>
		<svg class="icon" aria-hidden="true">
			<use xlink:href="#icon-wechat_pay"></use>
		</svg>
		<span>使用微信进行支付</span>
		<el-descriptions title="订单详情">
			<el-descriptions-item label="订单号"></el-descriptions-item>
			<el-descriptions-item label="创建时间"></el-descriptions-item>
			<el-descriptions-item label="产品名称"></el-descriptions-item>
			<el-descriptions-item label="商品描述"></el-descriptions-item>
			<el-descriptions-item label="购买数量"></el-descriptions-item>
			<el-descriptions-item label="购买用户"></el-descriptions-item>
			<el-descriptions-item label="地址"></el-descriptions-item>
			<el-descriptions-item label="手机号"></el-descriptions-item>
			<el-descriptions-item label="总价格"></el-descriptions-item>
		</el-descriptions>
	</div>
</template>
<script>
	import qrCode from "qrcode";
	import * as api from "@/api/users";
	import {mapState} from "vuex"
	//1.需要通过订单的id获取订单详情
	//2.根据订单id请求支付接口
	//3.通过轮询,查询支付状态
	export default {
		data() {
			return {
				order_id: "",//订单号
				//请求的订单详情
				orderDetail: {
					//数据初始化
					orderDetail: [
						{
							productName: "",
							description: "",
							quantity: "",
						},
					],
				},
				payUrlRes: {}, //请求获取的支付结果
				payUrl: "", //支付地址
			};
		},
		computed: {

		},
		created() {
			let { order_id } = this.$route.query;
			this.order_id = order_id;
			//3.如果用户刷新了当前页面,本次交易取消,我们需要让用户重新提交交易
			if (!this.order_id) {
				//没有订单id 有可能用户刷新了页面
				//提示:本次交易取消,返回到预支付页面
				this.$alert("本次交易取消,请重新提交", "提示", {
					confirmButtonText: "确定",
					callback: (action) => {
						this.$router.push({ path: "/preorder" })
					},
				});

				return;
			}
			//1.根据订单id 请求订单详情
			//2.根据订单id 获取微信支付地址,=>我们获取地址之后,生成二维码

			//并发请求 一次发送多个请求 Promise.all([promise1,promise2])

			Promise.all([api.getOrderDetail(this.order_id), api.pay(this.order_id)])
				.then(res => {
					console.log(res)
					this.orderDetail = res[0].data.data;
					let paymentRes = res[1].data;
					if (paymentRes.state) {
						//获取支付地址
						let payUrl = paymentRes.code_url;

						//生成二维码

						qrCode.toDataURL(payUrl, (err, img) => {
							console.log(img)
							this.payUrl = img;
						})
					}
				})

			//轮询 查询支付状态
			//轮询的时候,一定要设置时间
			//设置200ms

			this.queryPayStatusInterval = setInterval(() => {
				api.queryPayStatus(this.order_id)
					.then(res => {
						console.log(res)
						if (res.data.state) {
							//跳转到支付成功这个页面
							this.$router.push({ path: "/payment/paysuccess" })
						}
						// else {
						// 	this.$router.push({ path: "/vipmanager/charge" })
						// }
					})
			}, 2000)
		},
		beforeDestroy() {
			//组件即将销毁的时候
			//清除定时器
			clearInterval(this.queryPayStatusInterval)
		},
	};
</script>